<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{height:500px;width:100%;}
        #r-result{width:100%; font-size:14px;}
    </style>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=j62hC43Q8dGDu2NLLUSFAsl5X9pVsoQd"></script>
    <title>城市名定位</title>
</head>
<body>
<div id="app">
    <div ref="allmap" ></div>
</div>
<div id="allmap" style="width: 100%;height: 100%;"></div>
<div id="r-result">
    经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
    纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
    <input type="button" value="查询" onclick="theLocation()" />
</div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("南京",11);
    map.enableScrollWheelZoom(true);
    setTimeout(pointShow,500);
   /* map.centerAndZoom("南京",12);*/
    // 用经纬度设置地图中心点
    function theLocation(){
       /* if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
            // map.clearOverlays();
            var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            pointShow();
        }*/
    }
    function pointShow() {
        axios.get("/companylist/findAll.do").then(res=>{
            var data_info=res.data.data;
                for(var i=0;i<data_info.length;i++){
                    var marker = new BMap.Marker(new BMap.Point(data_info[i].longitudu,data_info[i].latitudu));  // 创建标注
                    var point = new BMap.Point(data_info[i].longitudu,data_info[i].latitudu);
                    map.addOverlay(marker);// 将标注添加到地图中
                    var opts = {
                        position : point,    // 指定文本标注所在的地理位置
                        offset   : new BMap.Size(20, -20)    //设置文本偏移量
                    }
                    var label = new BMap.Label(data_info[i].companyAddress,opts);  // 创建文本标注对象
                    label.setStyle({
                        color : "red",
                        fontSize : "10px",
                        height : "15px",
                        lineHeight : "15px",
                        fontFamily:"微软雅黑"
                    });
                    map.addOverlay(label);
                }
        })

    }
</script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
        },
        created() {
            this.companyShow();
            // this.createMapPoint();
        },
        methods: {
            createMapPoint(){

            },
            //添加
            companyShow(){

            }

        }
    })
</script>
